@extends('admin.layout')
@section('title',$title)
@section('content')
 <div class="content-wrapper">
        <!-- Content Header (Page header) -->
<section class="content-header">
    <h1>
        分类列表
        <small>查看分类详情
        @if(session('info'))
            <span id="info" class="text-red">{{session('info')}}</span>
        @endif
        </small>
    </h1>
    <ol class="breadcrumb">
        <li><a href="{{ url('/Admin/index') }}"><i class="fa fa-dashboard"></i> 首页</a></li>
        <li><a href="{{ url('/Admin/category/create') }}">添加分类</a></li>
        <li class="active">分类详情</li>
    </ol>
</section>

    <!-- Main content -->
    <section class="content">
        <div class="row">
            <div class="col-xs-12">
                <div class="box">
                    <div class="box-header">
                        <h3 class="box-title">分类列表详情</h3>
                    </div><!-- /.box-header -->
                    <div class="box-body">
                        <table id="example1" class="table table-bordered table-striped">
                        <form action="{{ url('/Admin/category') }}">
                        <div class="row">
                        	<div class="col-md-2">
                        		<select name="num" class="form-control">
                        			<option @if(!empty($request['num']) && $request['num'] == 5)selected="selected"@endif>5</option>
                        			<option @if(!empty($request['num']) && $request['num'] == 10)selected="selected"@endif>10</option>
                        			<option @if(!empty($request['num']) && $request['num'] == 20)selected="selected"@endif>20</option>
                                    <option @if(!empty($request['num']) && $request['num'] == 30)selected="selected"@endif>30</option>
                        			<option @if(!empty($request['num']) && $request['num'] == 50)selected="selected"@endif>50</option>
                        		</select>
                        	</div>
                        	<div class="col-md-4 col-md-offset-6">
                        		<div class="input-group input-group">
	                                <input type="text" name="keywords" value="{{ $request['keywords'] or ''}}" class="form-control">
				                    <span class="input-group-btn">
				                      <button class="btn btn-info btn-flat" type="submit">搜索</button>
				                    </span>
			                    </div><!-- /input-group -->
                        	</div>
                        </div>
						</form>
                            <thead>
                            <tr>
                                <th>ID号</th>
                                <th>文章名称</th>
                                <th>添加分类时间</th>
                                <th>分类修改时间</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            @foreach($data as $row)
                            <tr>
                                <td>{{ $row -> id }}</td>
                                <td>{{ $row -> catname }}</td>
                                <td>{{ $row -> created_at }}</td>
                                <td>{{ $row -> updated_at }}</td>
                                <td><a href="{{url('/Admin/category')}}/{{$row -> id}}">查看详情　　</a><a href="{{url('/Admin/category')}}/{{$row -> id}}/edit">编辑</a>  <a href="javascript:doDel({{$row -> id}});">删除</a></td>

                            </tr>
                            @endforeach
                            <form style="display: none;" id="delForm" action="" method="post">
                                    {{method_field("DELETE")}}
                                    {{csrf_field()}}
                            </form>
                           </tbody>
                        </table>
                         <center>{{ $data -> appends($request)->links()}}</center>
                    </div><!-- /.box-body -->
                </div><!-- /.box -->
            </div><!-- /.col -->
        </div><!-- /.row -->
    </section><!-- /.content -->
</div><!-- /.content-wrapper -->
<script type="text/javascript">
function doDel(id)
{
    var delForm = document.getElementById('delForm');
    delForm.action = "{{ url('/Admin/category') }}"+'/'+ id;
    delForm.submit();
}
    // 预先加载jq文档,先将页面渲染
    window.onload = function()
    {

        // 设置一个开关. 目的双击第二次不显示input表单
        var isDbl = true;

        // 设置ajax 头部信息
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        // 添加双击事件
        $('.td_name').on('dblclick', function(){
            // 判断
            if(!isDbl)
            {
                return ;
            }
            isDbl = false;

            // 获取td元素
            var td = $(this);
            // 获取 id 用来判断修改哪条数据
            var id = $(this).prev().html();
            // 获取原来的值
            var old_value = $(this).html();
            // 创建input输入框
            var inp = $('<input type="text" />');
            // 将原来的值 写入input
            inp.val(old_value);
            // 将td 改为 input
            $(this).html(inp);

            // 直接选中.聚焦
            inp.select();

            // 失去双击焦点事件
            inp.on('blur',function(){
                // 获取新值
                var new_value = $(this).val();
                $.ajax({
                    url:"{{ url('/Admin/user/changename') }}",
                    type:'GET',
                    data:{id:id, hd_name:new_value},
                    success:function(data){
                        if(data == '1')
                        {
                            td.html(new_value);
                        }else
                        {
                            td.html(old_value);
                        }
                    },
                    error:function(){
                        // 上线产品.不能够开这个错误信息
                    },
                    dataType:'TEXT'
                });
                isDbl = true;
            });
        });
        $('#info').fadeOut(3000);
    }
</script>
@endsection